/*
 *  Copyright 2024 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@button-bg-color-hover: #ecedee;
@button-bg-color: #e8e8e9;
@format-group-separator-color: #e5e7eb;
@menu-bg-color: #f7f9fc;

.bar-menu-wrapper {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: @menu-bg-color;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 8px;
  border-bottom: 1px solid @format-group-separator-color;
  gap: 1rem;

  .bar-menu-wrapper--format-group {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;

    .bar-menu-wrapper--format-group--button {
      background-color: transparent;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;

      &:hover {
        background-color: @button-bg-color-hover;
      }

      &.active {
        background-color: @button-bg-color;
      }
      .bar-menu-wrapper--format--button--icon {
        width: 28px;
        height: 28px;
      }
    }
  }

  .bar-menu-wrapper--format-group--separator {
    border-left: 1px solid @format-group-separator-color;
  }
}
